<template>
<!-- 精选题库 -->
  <div class='container'>
    <el-card>
        <div class="addText">
          <el-button type="primary" @click="$router.push('/questions/new')">新增试题</el-button>
        </div>
        <!-- 筛选表单区域 -->
        <el-form inline label-width="110px">
          <el-form-item label="学科">
            <el-select v-model="query.subjectID"  placeholder="请选择">
                 <el-option
                 :label="item.subjectName"
                 :value="item.id"
                 v-for="(item, index) in subject"
                 :key="index"
                 >{{item.subjectName}}</el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select  placeholder="请选择">

              </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select  placeholder="请选择">

              </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input class="input-style" v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select v-model="query.questionType" placeholder="请选择">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简单" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="query.difficulty" placeholder="请选择">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="录入人">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select style="width:110px"  placeholder="请选择">

              </el-select>
            <el-select style="width:110px"  placeholder="请选择">

              </el-select>
          </el-form-item>
          <el-form-item class="btn">
            <el-button @click="onCancel">取消</el-button>
            <el-button  type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 标签页 -->
        <el-tabs  type="card" @tab-click="handleClick">

          <el-alert
            :title="'数据一共'+ total +'条'"
            type="info">
          </el-alert>
          <el-tab-pane label="全部"></el-tab-pane>
          <el-tab-pane label="待审核"></el-tab-pane>
          <el-tab-pane label="已审核"></el-tab-pane>
          <el-tab-pane label="已拒绝"></el-tab-pane>
        </el-tabs>
        <!-- 表格区域 -->
        <el-table :data="list" style="width: 100%">
              <el-table-column prop="catalog" label="目录"></el-table-column>
              <el-table-column prop="questionType" label="题型">
                <template slot-scope="scope">
                    <span v-if="scope.row.questionType === '1'">单选</span>
                    <span v-else-if="scope.row.questionType === '2'">多选</span>
                    <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column prop="question" label="题干">
                <template slot-scope="scope">
                    <span v-html="scope.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column prop="addDate" label="录入时间">
                <template slot-scope="scope">
                  {{scope.row.addDate | parseTimeByString}}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度">
                <template slot-scope="scope">
                    <span v-if="scope.row.difficulty === '1'">简单</span>
                    <span v-else-if="scope.row.difficulty === '2'">一般</span>
                    <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人"></el-table-column>
              <el-table-column prop="chkState" label="审核状态">
                <template slot-scope="scope">
                  <el-button type="warning" plain size="mini" v-if="scope.row.chkState === 0">待审核</el-button>
                  <el-button type="success" plain size="mini" v-else-if="scope.row.chkState === 1">已通过</el-button>
                  <el-button type="danger" plain size="mini" v-else>拒绝</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见"></el-table-column>
              <el-table-column prop="chkUser" label="审核人"></el-table-column>
              <el-table-column prop="publishState" label="发布状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.publishState === 0">未发布</span>
                  <span v-else>已发布</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="210px">
                <template slot-scope="scope">
                  <el-button type="text" @click="preview(scope.row)">预览</el-button>
                  <el-button type="text" :disabled="scope.row.chkState !== 0 ? true : false" @click="checkDialog(scope.row)">审核</el-button>
                  <el-button type="text" :disabled="scope.row.chkState === 2 ? true : false" @click="toQuestionnew(scope.row)">修改</el-button>
                  <el-button type="text" v-if="scope.row.publishState === 0" @click="upDown(scope.row.id, 1)">上架</el-button>
                  <el-button type="text" v-if="scope.row.publishState === 1" @click="upDown(scope.row.id, 0)">下架</el-button>
                  <el-button type="text" :disabled="scope.row.chkState === 2 ? true : false" @click="deleteDetail(scope.row)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 15, 30]"
        :page-size="query.pagesize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      <!-- 审核弹框 -->
      <el-dialog
        title="题目审核"
        width="30%"
        :visible.sync="checkDialogVisible">
        <!-- 表单验证 -->
        <el-form ref="checkFormRef" :model="checkForm" :rules="checkFormRules">
          <el-form-item>
            <el-radio-group v-model="radio" @change="changevalue(radio)">
              <el-radio :label= 1>通过</el-radio>
              <el-radio :label= 2>拒绝</el-radio>
            </el-radio-group>
            <!-- <el-radio v-model="radio" label=1>通过</el-radio>
            <el-radio v-model="radio" label=2>拒绝</el-radio> -->
          </el-form-item>
          <el-form-item  prop="textarea">
             <el-input
                type="textarea"
                class="textarea"
                :rows="4"
                placeholder="请输入审核意见"
                v-model="checkForm.chkRemarks">
              </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="checkDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addcheck">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 预览弹框 -->
        <el-dialog
          title="题目预览"
          :visible.sync="previewDialogVisible">
          <!-- 预览组件子 -->
          <questions-preview
          :scope="scope"
          :details="details"
          v-if="previewDialogVisible"/>
          <span slot="footer" class="dialog-footer">
            <el-button @click="previewDialogVisible = false">关 闭</el-button>
          </span>
        </el-dialog>
      </el-card>
  </div>
</template>

<script>
import { choice, remove, choiceCheck, choicePublish, detail } from '@/api/hmmm/questions'
import questionsPreview from '../components/questions-preview.vue'
import { list } from '@/api/hmmm/subjects'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      list: {},
      subject: {},
      query: {
        page: 1,
        pagesize: 10,
        questionType: null,
        difficulty: null,
        chkState: null,
        chkRemarks: '',
        subjectID: null
      },
      checkForm: {
        id: '',
        chkState: '',
        chkRemarks: ''
      },
      scope: {},
      details: {},

      total: 0,
      keyword: '',
      checkDialogVisible: false,
      previewDialogVisible: false,
      radio: 1,

      id: '',
      checkFormRules: {
        textarea: [
          { required: true, message: '必须输入审核意见', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取精选题库列表
    async loadList () {
      try {
        const { data } = await choice(this.query)
        console.log(data)
        this.list = data.items
        this.total = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    async loadSubject () {
      try {
        const { data } = await list()
        console.log(data)
        this.subject = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 题目预览
    preview (scope) {
      this.previewDialogVisible = true
      this.scope = scope
      this.loadDetail(scope)
    },
    // 获取题库详情
    async loadDetail (scope) {
      try {
        const { data } = await detail({
          id: scope.id
        })
        console.log(data)
        this.details = data
      } catch (err) {
        console.log(err)
      }
    },
    // 精选题库删除
    async deleteDetail (scope) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await remove({
          id: scope.id
        })
        this.loadList()
      } catch (err) {
        this.$message.info('取消删除')
      }
    },
    checkDialog (scope) {
      this.checkDialogVisible = true
      this.checkForm.id = scope.id
    },
    // 试题审核
    async addcheck () {
      this.$refs.checkFormRef.validate(valid => {
        if (!valid) return false
      })
      try {
        const { data } = await choiceCheck(this.checkForm)
        console.log(data)
        this.loadList()
        this.checkDialogVisible = false
      } catch (err) {
        console.log(err)
      }
    },
    // ridio改变事件
    changevalue (radio) {
      console.log(radio)
      this.checkForm.chkState = radio
    },
    // 上下架
    async upDown (id, num) {
      try {
        await choicePublish({
          id,
          publishState: num
        })
        this.loadList()
      } catch (err) {

      }
    },
    toQuestionnew (scope) {
      this.$router.push({ path: '/questions/new', query: { id: scope.id } })
    },
    onSearch () {
      this.query.page = 1
      this.loadList()
    },
    onCancel () {
      this.query = {
        page: 1,
        pagesize: 10,
        questionType: null,
        difficulty: null
      }
    },
    handleClick (tab, event) {
      // console.log(tab.index)
      if (tab.index === '0') {
        console.log(tab.index)
        this.query.chkState = null
        this.loadList()
      } else {
        this.query.chkState = tab.index - 1
        this.loadList()
      }
    },
    handleCurrentChange (newnum) {
      this.query.page = newnum
      this.loadList()
    },
    handleSizeChange (newsize) {
      this.query.pagesize = newsize
      this.loadList()
    }

  },
  created () {
    this.loadList()
    this.loadSubject()
  }
}
</script>

<style scoped>
.addText{
  display: flex;
  justify-content:flex-end
}
.input-style{
   width:220px;
}
.container{
  padding: 10px;
}
.textarea{
  margin-top: 40px;
}

</style>
